<template>
  <div class="admin-advertising-add">
    <div class="admin-advertising-add-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/index/home' }"
          ><i class="el-icon-s-home"> 首页</i></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><router-link to="/admin/index/advertising"
            ><i class="el-icon-picture-outline">广告管理</i></router-link
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><router-link to="/admin/index/advertising/add"
            ><i class="el-icon-camera">添加图片</i></router-link
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="admin-advertising-add-img">
      <div class="title">添加图片</div>
      <div class="admin-advertising-add-img-main">
        <table>
          <tbody>
            <tr>
              <td>图片名称</td>
              <td>
                <input
                  @blur="checkForm1"
                  type="text"
                  :class="{ error: !checkname }"
                  v-model="sname"
                  maxlength="20"
                />&nbsp;
                <span class="msg" v-show="!checkname">输入不能为空</span>
              </td>
            </tr>
            <tr>
              <td>图片分类</td>
              <td>
                <input
                  @blur="checkForm2"
                  type="text"
                  :class="{ error: !checkpro }"
                  v-model="spro"
                  maxlength="20"
                />&nbsp;
                <span class="msg" v-show="!checkpro">输入不能为空</span>
              </td>
            </tr>
            <tr>
              <td>图片</td>
              <td>
                <el-upload
                  class="upload-demo"
                  drag
                  action="http://localhost:4000/upload"
                  multiple
                  name="uploadFile"
                  :limit="1"
                  :on-success="uploadSuccess"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将图片拖到此处，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
                <div v-if="simg">
                  <img width="100px" :src="simg" alt="" />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="admin-advertising-add-img-btn">
          <el-button type="success" @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sname: "",
      spro: "",
      simg: "",
      checkname: true,
      checkpro: true,
    };
  },
  methods: {
    uploadSuccess(res, file) {
      console.log(res.urls[0]);
      console.log("file:", file);
      this.simg = res.urls[0];
    },
    // 验证图片名称
    checkForm1() {
      if (this.sname.trim() == "") {
        this.checkname = false;
      } else {
        this.checkname = true;
      }
    },
    // 验证图片分类
    checkForm2() {
      if (this.spro.trim() == "") {
        this.checkpro = false;
      } else {
        this.checkpro = true;
      }
    },
    submit() {
      this.checkForm1();
      this.checkForm2();
      if (this.checkname && this.checkpro && this.simg != "") {
        var url = `imgUrl/insert`;
        var params = `carname=${this.sname}&kind=${this.spro}&carimg=${this.simg}`;
        this.axios
          .post(url, params)
          .then((res) => {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          })
          .catch((err) => {
            this.$message({
              type: "error",
              message: err,
            });
          });
        this.$router.push("/admin/index/advertising");
      } else if (this.simg == "") {
        this.$message({
          type: "error",
          message: "请先上传图片！",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-advertising-add-img {
  margin-top: 20px;

  .title {
    background-color: rgba(202, 199, 199, 0.4);
    padding: 8px;
  }
  .admin-advertising-add-img-main {
    table {
      // border: 1px solid gray;
      width: 100%;
      text-align: center;
      margin-top: 10px;
      tr {
        td > .msg {
          color: red;
        }
        td:first-child {
          text-align: right;
        }
        td:last-child {
          text-align: left;
          padding: 10px;
          input {
            border: 1px solid #333;
            border-radius: 4px;
            width: 200px;
            padding: 10px;
            &.error {
              border-color: red;
            }
          }
        }
      }
    }
  }
  .admin-advertising-add-img-btn {
    margin-left: 175px;
  }
}
</style>
